<template>
  <div>
    <div class="box" id="shoukuanContent">
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600"
      >
        四川威斯腾物流有限公司
      </div>
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600"
      >
        收据
      </div>
      <div class="">
        <div
          class="flex justify_between align_center"
          style="margin-bottom: 6px"
        >
          <div class="flex">
            <div>交款人：</div>
            <div class="dept">{{handleDeptName(props.row.pay_dept_id)  }}</div>
          </div>
          <div>{{ tool.dateFormat(
          Math.round(new Date().getTime() / 1000).toString(),
          "yyyy-MM-dd hh:mm:ss"
        ) }}</div>
          <div class="flex">
            <div>NO：</div>
            <div class="no">{{ props.row.prediction.yundanhao }}</div>
          </div>
        </div>
        <div class="border" style="margin-bottom: 6px">
          <div class="flex">
            <div class="padd12 bor_r bor_b center" style="width: 150px">
              <div>收款项目</div>
            </div>
            <div class="padd12 bor_r bor_b center" style="width: 120px">
              <div>应收金额</div>
            </div>
            <div class="padd12 bor_r bor_b center" style="width: 120px">
              <div>类型</div>
            </div>
            <div class="padd12 bor_r bor_b center" style="width: 150px">
              <div>运单号</div>
            </div>
            <div class="padd12 bor_b center flex_1">
              <div>备注</div>
            </div>
          </div>
          <div
            class="flex"
            v-for="(item, index) in props.row.detail"
            :key="index"
          >
            <div
              class="padd12 bor_r bor_b center height32"
              style="width: 150px"
            >
              <div>{{ item.pay_name || "" }}</div>
            </div>
            <div
              class="padd12 bor_r bor_b center height32"
              style="width: 120px"
            >
              <div>{{ item.pay_real_price || "" }}</div>
            </div>
            <div
              class="padd12 bor_r bor_b center height32"
              style="width: 120px"
            >
              <div>{{ tihuanText(props.row) }}</div>
            </div>
            <div
              class="padd12 bor_r bor_b center height32"
              style="width: 150px"
            >
              <div>{{ item.prediction.yundanhao || "" }}</div>
            </div>
            <div class="padd12 bor_b center flex_1 height32">
              <div>{{ item.remark || "" }}</div>
            </div>
          </div>
          <div class="flex">
            <div
              class="padd12 bor_r bor_b center height32"
              style="width: 150px"
            >
              <div>合计：</div>
            </div>
            <div class="padd12 bor_b flex flex_1 height32">
              <div style="text-align: start">{{ zongMoney() }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="padd12 bor_r center height32" style="width: 150px">
              <div>合计大写：</div>
            </div>
            <div class="padd12 flex flex_1 height32">
              <div style="text-align: start">
                {{ convertToChineseCapital() }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="flex_1">审核：</div>
          <div class="flex_1">会计：</div>
          <div class="flex_1">出纳：</div>
          <div class="flex_1">制单：{{ props.user.nickname }}</div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px" class="flex justify_end">
      <a-button type="primary" @click="showCount = true">打印</a-button>
    </div>
    <a-modal
      v-model:visible="showCount"
      width="600px"
      title="提示"
      ok-text="打印"
      :footer="false"
    >
      <div class="flex justify_center align_center" style="height: 100px">
        <div>已打印{{ count }}次，确定打印？</div>
      </div>
      <div class="flex justify_end">
        <a-button v-print="printObj" type="primary">打印</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
import tool from "@/utils/tool";
import { pinyin } from "pinyin-pro"
import { request } from "@/utils/request.js";
const props = defineProps({
  row: Object,
  user: Object
});
const count = ref(0);
const showCount = ref(false);
const dept_list = ref([])
const payTypeList = ref([
  {
    label: "现结",
    value: "now_pay"
  },
  {
    label: "周期结算",
    value: "periodic"
  },
  {
    label: "预付款",
    value: "money"
  }
]);

const shoukuanContent = ref();
const printObj = {
  id: "shoukuanContent",
  popTitle: "页面打印",
  openCallback: (vue) => {
    predictionDeriverOrder
      .getprintSave({ type: 4, link_id: props.row.id })
      .then((res) => {
        showCount.value = false;
        handlegetCount();
      });
  }
};
const handleDeptList = () => {   //  获取公司列表
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
            openPage: false,
            remoteOption: {
                filter: {
                    type: ['=', 2],
                    status: ['=', 1]
                },
                select: ["id", "name"],
                sort: { id: "desc" }
            }
        }
    }).then(res => {
        res.data.map((v, i) => {
            v.keywords = [
                v.name,
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join(''),
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join('').toUpperCase()
            ]
        })
        dept_list.value = res.data
    })
}
const handlegetCount = () => {
  predictionDeriverOrder
    .getCount({ type: 4, link_id: props.row.id })
    .then((res) => {
      console.log(res);
      count.value = res.data.count;
    });
};
const handleDeptName = (id) =>{
  let name = ''
  dept_list.value.map((v, i) => {
    if(v.id == id){
      name = v.name
    }
  })
  return name
}
onMounted(() => {
  console.log("888888", props.user.nickname);
  console.log("888888", props.row);
  handlegetCount();
  handleDeptList();
});
const tihuanText = (item) => {
  let text = "";
  payTypeList.value.map((v, i) => {
    if (v.value == item.pay_type) {
      text = v.label;
    }
  });
  return text;
};
const zongMoney = () => {
  let num = 0;
  props.row.detail.map((v, i) => {
    num += v.pay_real_price - 0;
  });
  return num.toFixed(2);
};
const convertToChineseCapital = () => {
  let num = 0;
  props.row.detail.map((v, i) => {
    num += v.pay_real_price - 0;
  });
  var strOutput = "";
  var strUnit = "仟佰拾亿仟佰拾万仟佰拾元角分";
  num += "00";
  var intPos = num.indexOf(".");
  if (intPos >= 0) {
    num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
  }
  strUnit = strUnit.substr(strUnit.length - num.length);
  for (var i = 0; i < num.length; i++) {
    strOutput +=
      "零壹贰叁肆伍陆柒捌玖".substr(num.substr(i, 1), 1) + strUnit.substr(i, 1);
  }
  return strOutput
    .replace(/零角零分$/, "整")
    .replace(/零[仟佰拾]/g, "零")
    .replace(/零{2,}/g, "零")
    .replace(/零([亿|万])/g, "$1")
    .replace(/零+元/, "元")
    .replace(/亿零{0,3}万/, "亿")
    .replace(/^元/, "零元");
};
</script>

<style lang="less" scoped>
.box {
  width: 210mm;
  padding: 5mm 10mm;
  box-sizing: border-box;
  position: relative;
}
.dept {
  padding-right: 40px;
}
.no {
  color: red;
}
.logoImg {
  position: absolute;
  top: 0px;
  width: 200px;
}
.border {
  border: 1px solid rgba(0, 0, 0, 1);
}
.bor_r {
  border-right: 1px solid rgba(0, 0, 0, 1);
}
.bor_b {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.padd12 {
  padding: 6px 10px;
  box-sizing: border-box;
}
.text_center {
  text-align: center;
}
.height32 {
  min-height: 32px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
